import React, { useState, useEffect } from 'react'
import { Card, Button, Table } from "antd"
import { findAllRole } from "@/apis/role"
import Auth from '../../components/Auth'

export default function Role() {
    const [roles, setRoles] = useState([])
    const [openDrawer,setOpenDrawer] = useState(false)
    const [roleId,setRoleId] = useState(null)
    const [menus,setMenus] = useState([])

    useEffect(() => {
        fetchData()
    }, [])

    const fetchData = async () => {
        const res = await findAllRole()
        console.log(res);
        setRoles(res.data.data)
    }

    const auth = (row) => {
        console.log(row);
        setMenus(row.menus)
        setRoleId(row._id)
        setOpenDrawer(true)
    }

    const changeOpenModelState = ()=>{
      setOpenDrawer(false)
    }
    const columns = [
        {
            title: '角色名字',
            dataIndex: 'name'
        },
        {
            title: '创建日期',
            dataIndex: 'createTime'
        },
        {
            title: '授权人',
            dataIndex: 'authUser',
        },
        {
            title: '授权日期',
            dataIndex: "authTime"
        },
        {
            title: '操作',
            width: "140px",
            render: (text) => {
                return (
                    <span>
                        <Button type='default'>删除</Button>&nbsp;&nbsp;
                        <Button onClick={() => auth(text)} type="dashed">授权</Button>&nbsp;&nbsp;
                    </span>
                )
            }
        }
    ];
    const search = (
        <span>
            <Button type="primary">添加角色</Button>&nbsp;&nbsp;&nbsp;&nbsp;
        </span>
    )
    return (
        <div>
            <Card title={search} style={{ width: "100%" }}>
                <Table
                    columns={columns}
                    dataSource={roles}
                    bordered
                    rowKey="_id"
                    pagination={{ defaultPageSize: 5, showQuickJumper: true }}
                    loading={false}
                />
            </Card>
            {openDrawer?<Auth changeOpenModelState={changeOpenModelState} roleId={roleId} menus={menus}></Auth>:null}
        </div>
    )
}
